<script setup lang="ts">
import { ref } from 'vue'
</script>

<template>
  <div class="box">
    <div class="left">
        <img class="cs" src="../../assets/cs.png">
    </div>
    <div class="right">
      <header class="title">欢迎注册创思设备管理系统</header>
      <form>
        <div class="inputbox">
          <label for="usrename">姓名:</label>
          <br>
          <input class="usrname"  name="usrname" id="usrname" type="email">
        </div>
        <div class="inputbox">
          <label for="usremail">邮箱:</label>
          <br>
          <input class="usremail"  name="usremail" id="usremail" type="email">
        </div>
        <div class="inputbox">
          <label for="password">密码:</label>
          <br>
          <input class="password" name="password" id="password" type="password">
          <i class="iconfont icon-yanjing_xianshi"></i>
        </div>
        <div class="pwdstength">
            密码强度:
        </div>
        <div class="agreenmentbox">
            <input class="agreenment" name="agreenment" id="agreenment" type="checkbox">
            <label for="agreenment">我已阅读用户协议并同意</label>
        </div>
        <input class="registerbtn" value="注册" type="submit">
      </form>
      <div class="assistbox">
        <div class="loginbox"><p>您已有平台账号?<span class="login"><router-link to="/">用户登录</router-link></span></p></div>
        <div class="forgetpwd">忘记密码</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.box{
    width: 100vw;
    height: 100vh;
    display: flex;
}
.left{
    height: 100%;
    background-color:rgba(154, 154, 235, 0.5);
    flex: 1;
}
.right{
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    align-items: center;
    justify-content: center;
}
.cs{
  position: relative;
  left: 50%;
  top: 50%;
  display: block;
  width: 50%;
  height: 50%;
  transform: translate(-50%,-50%);
}
i{
 position: relative;
 display: block;
 left: 420px;
 top: -25px;
 width: 30px;
 height: 30px;
}
.title{
  font-size: 32px;
  line-height: 37.5px;
  margin-bottom: 50px;
}
.inputbox{
  display: flex;
  flex-direction: column;
  width: 446px;
  height: 103px;
}
.pwdstength{
    font-weight: 600;
}
.agreenmentbox > label{
  font-weight: 500;
  font-size: 16px;
  margin-left: 10px;
}
.agreenmentbox{
    display: flex;
    font-size: 16px;
    line-height: 35px;
}
.registerbtn{
  margin-top: 20px;
  width: 446px;
  border: none;
  color: #ffffff;
  background-color: #1E1E1E;
  margin-top: 10px;
}
.login{
  margin-left: 5px;
  color: #4D4DDB;
}
.assistbox{
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.loginbox{
    position: relative;
    left: -100px;
}
.forgetpwd{
    position: relative;
    right: -100px;
}


label{
  font-size: 24px;
}
input{
  height: 35px;
  padding-left: 10px;
  outline: none;
  border: 2px solid #4D4DDB;
  border-radius: 5px;
}
a{
  text-decoration: none;
}
</style>
